<template>
  <div class="video_box">
    <video :id="'myVideo' + id" :height="height" class="video-js videoDiv">
      <source :src="url" type="application/x-mpegURL" />
    </video>
  </div>
</template>

<script>
import Video from 'video.js'
import 'videojs-contrib-hls'
import 'video.js/dist/video-js.css'

export default {
  props: {
    id: {
      type: String,
      default: '0'
    },
    url: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '200'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      flvPlayer: null
    }
  },
  mounted() {
    this.playHandler()
  },
  beforeDestroy() {
    Video('myVideo' + this.id, {
      // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
      controls: true,
      // 自动播放属性,muted:静音播放
      autoplay: 'muted',
      // 建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
      preload: 'auto',
      // 设置视频播放器的显示宽度（以像素为单位）
      width: this.width
    }, function onPlayerReady() {
      this.dispose()
    })
  },
  methods: {
    initVideo() {
      const that = this
      // 初始化视频方法
      Video('myVideo' + this.id, {
        // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        controls: true,
        // 自动播放属性,muted:静音播放
        autoplay: 'muted',
        // 建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        preload: 'auto',
        // 设置视频播放器的显示宽度（以像素为单位）
        width: this.width
      }, function() {
        that.flvPlayer = this
        // that.playHandler()
      })
    },
    playHandler() {
      if (this.flvPlayer) {
        this.flvPlayer.play()
      } else {
        this.initVideo()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .video_box {
    width: 100%;
    height: 100%;
    .videoDiv {
      width: 100% !important;
      height: 100%;
    }
    .video-js {
      .vjs-tech {
        position: static;
      }
    }
  }
</style>
